<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <title>更新并管理图书</title>


    <style>
        /*使用伪类将input的placeholder变色*/
        input:focus::placeholder {
            filter: brightness(1.4);
        }
       * {
           margin: 0px;
       }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }
        body {
            background-color: #f7f7f7;
        }

        .body {
            position: absolute;
            overflow: auto;
            /*height: 695px;*/
            width: 1280px;
            left: calc(50% - 640px);
            top: 120px;
            /*margin-left: 80px;*/
            /*margin-top: 40px;*/
            border: 2px solid;
            border-color: #aab0ac;
            background-color: #f7f7f7;
        }

        #searchBox {
            position: fixed;
            top: 0px;
            /*left: calc(50% - 640px);*/
            height: 120px;
            /*line-height: 100px;*/
            width: 100%;
            background-color: #ffffff;
            z-index: 20;
        }

        #query_ipt {
            position: absolute;
            width: 400px;
            height: 25px;
            left: calc(50% - 200px);
            top: 15px;
            border-radius: 20px;
            border: 1px solid;
            border-color: #5f625f;
            font-size: 18px;
            font-family: Arial;
            color: #5f625f;
            padding: 5px 0 5px 20px;
            outline: 0;
            outline: none;
        }

        #query_btn {
            position: absolute;
            top: 45px;
            left: calc(50% + 142px);
            width: 80px;
            height: 36.7px;
            border-radius: 0 20px 20px 0;
            border: none;
            background-color: #006cbe;
        }

        #query_btn:hover {
            cursor: pointer;
            filter: brightness(1.3);
        }

        input {
            display: inline-block;
            float: top;
            margin-top: 30px;
            margin-bottom: 10px;

        }

        #admin {
            position: absolute;
            left: calc(50% - 642px + 80px);
            top: 25px;
            text-align: center;
            font-size: 45px;
            height: 40px;
            color: #01b6eb;
        }
        #favicon {
            position: absolute;
            left: calc(50% - 642px);
            top: 25px;
            width: 70px;
            height: 70px;
        }

        #add_book {
            position: absolute;
            width: 35px;
            height: 35px;
            top: 45px;
            right: calc(50% - 400px);
            cursor: pointer;
        }

        #add_book:hover {
            filter: brightness(1.2);
        }

        .tab {
            margin: 20px 0 0 80px;
            border-right: 0px;
            border-bottom: 1px solid;
            border-left: 0px;
            border-top: 0px;
            border-color: #aab0ac;

        }

        .tab th {
            border-right: 0px;
            border-bottom: 1px solid;
            border-left: 0px;
            border-top: 0px;
            border-color: #edf0ed;
            width: 160px;
            height: 65px;
            color: black;
            font-size: 20px;
            font-family: "Microsoft JhengHei UI";
        }

        .tab tr {
            width: 160px;
            height: 65px;
            text-align: center;

        }

        .tab td {
            border-right: 0px;
            border-bottom: 1px solid;
            border-left: 0px;
            border-top: 1px solid;
            border-color: #edf0ed;
            background-color: #ffff;
            color: #5f625f;
            font-size: 18px;
        }

        .tab #operation {
            word-spacing: 15px;
        }

        .updateBook {
            color: #01b6eb;
        }

        .updateBook:hover {
            filter: brightness(1.2);
        }

        .deleteBook {
            color: #01b6eb;
        }

        .deleteBook:hover {
            filter: brightness(1.2);
        }

        .window_css {
            z-index: 10;
            -moz-opacity: 0.18;
            opacity: .18;
            filter: alpha(opacity=18);
        }

        .hoverWindow_css {
            display: none;
            position: relative;
            top:100px;
            left: calc(50% - 350px);
            width: 700px;
            height: 600px;
            border: 0px solid;
            border-radius: 30px;
            background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%);
            box-shadow: 0px 20px 30px #989595;
            z-index: 11;
            transition: 1.25s;
        }

        .hoverWindow_css:hover {
            transition: 1.5s;
            transform: scale(1.06);
        }

        .hoverWindow_css #cancel_img {
            position: absolute;
            top: 20px;
            right: 50px;
            font-size: 18px;
            cursor: pointer;
            color: #5f625f;
        }

        .hoverWindow_css #cancel_img:hover {
            filter: brightness(1.1);
            text-decoration: underline;
        }

        .ipt {
            width: 200px;
            height: 30px;
            background-color: rgba(246, 243, 243, .2);
            border: 1px solid #5f625f;
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;
            background: none;
            outline: none;
            font-size: 18px;
            color: #5f625f;
            font-family: Arial;
            padding: 6px 0 6px 20px;
        }

        .hoverWindow_css form {
            position: relative;
            top: 20px;
            width: 300px;
            left: calc(50% - 150px);
        }


        /*#span1 {*/
        /*    position: absolute;*/
        /*    top: 100px;*/
        /*    */
        /*}*/

        /*#span2 {*/
        /*    position: absolute;*/
        /*    top: 150px;*/
        /*    left: 36.5%;*/
        /*}*/

        /*#span3 {*/
        /*    position: absolute;*/
        /*    top: 200px;*/
        /*    left: 36.5%;*/
        /*}*/

        /*#span4 {*/
        /*    position: absolute;*/
        /*    top: 250px;*/
        /*    left: 36.5%;*/
        /*}*/

        /*#span5 {*/
        /*    position: absolute;*/
        /*    top: 300px;*/
        /*    left: 36.5%;*/
        /*}*/

        /*#span6 {*/
        /*    position: absolute;*/
        /*    top: 350px;*/
        /*    left: 35%;*/
        /*}*/

        #delete_img {
            width: 25px;
            height: 25px;
            margin: auto;
        }

        #delete_img:hover {
            filter: brightness(1.2);
        }

        #update_img {
            width: 25px;
            height: 25px;
            margin: auto;
        }

        #update_img:hover {
            filter: brightness(1.2);
        }

        #submit {
            font-family: Arial;
            font-size: 16px;
            color: #1d1f1d;
            line-height: 30px;
            position: relative;
            width: 200px;
            height: 30px;
            top: 25px;
            cursor: pointer;
            border: 0px solid;
            border-radius: 20px;
            background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%);
        }

        #submit:hover {
            filter: brightness(1.03);
        }

    </style>
</head>
<body>
<div id="window" style="position: relative">
    <div id="searchBox">
        <img src="images/favicon.png" alt="" id="favicon">
        <p id="admin">_憩息阁_</p>
        <input type="text" name="queryName" value="" class="query_ipt" id="query_ipt"
               placeholder="请输入书名">
        <button type="submit" id="query_btn"><img src="images/query1.png" alt=""
                                                  style="width: 25px; height: 25px;"></button>
        <img src="images/add.png" alt="" id="add_book" title=" 添加图书 ">
        <br>
    </div>

    <div class="body">
        <table border="1" cellspacing="0" class="tab" id="bookTable">
            <tbody>
            <tr>
                <th>书本编号</th>
                <th>书名</th>
                <th>作者</th>
                <th>价格</th>
                <th>库存</th>
                <th>出版社</th>
                <th colspan="2">操作</th>
            </tr>

            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td id="operation">
                    <a href="#" class="updateBook">
                        <img src="images/update.png" alt="" title=" 修 改 " id="update_img">
                    </a>
                    <a href="#" class="deleteBook">
                        <img src="images/delete.png" alt="" title=" 删 除 " id="delete_img">
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

</div>
<div id="hoverWindow" class="hoverWindow_css">
    <div id="cancel_img"> 返 回</div>

    <form action="/updateBook" method="post" style="text-align: center">
        <div id="span1">
            <span >编号： <input type="text" class="ipt" name="bookId" id="bookId"></span>
        </div>

        <div id="span2">
            <span>书名： <input type="text" class="ipt" name="bookName" id="bookName"></span>
        </div>

        <div id="span3">
            <span >作者： <input type="text" class="ipt" name="author" id="author"></span>
        </div>

        <div id="span4">
            <span >价格： <input type="text" class="ipt" name="price" id="price"></span>
        </div>

        <div id="span5">
            <span >库存： <input type="text" class="ipt" name="stock" id="stock"></span>

        </div>

        <div id="span6">
            <span >出版社：<input type="text" class="ipt" name="publisher" id="publisher"></span>

        </div>

        <div>
            <span><button type="submit" id="submit">  </button></span>
        </div>
    </form>

</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url: "/getAllBooks",
        method: 'get'
    }).then(resp => {
        var bookList = resp.data;
        var tableData = "<tr >\n" +
            "        <th>书本编号</th>\n" +
            "        <th>书名</th>\n" +
            "        <th>作者</th>\n" +
            "        <th>价格</th>\n" +
            "        <th>库存</th>\n" +
            "        <th>出版社</th>\n" +
            "        <th colspan=\"2\">操作</th>\n" +
            "      </tr>\n"
        for (var i = 0; i < bookList.length; i++) {
            tableData += "<tr>\n" +
                "          <td>" + bookList[i].bookName + "</td>\n" +
                "          <td>" + bookList[i].bookId + "</td>\n" +
                "          <td>" + bookList[i].author + "</td>\n" +
                "          <td>" + bookList[i].price + "</td>\n" +
                "          <td>" + bookList[i].stock + "</td>\n" +
                "          <td>" + bookList[i].publisher + "</td>\n" +
                "          <td id=\"operation\">\n" +
                "            <a href=\"#\" class=\"updateBook\">\n" +
                "              <img src=\"images/update.png\" alt=\"\" title=\" 修 改 \" id=\"update_img\">\n" +
                "            </a>\n" +
                "            <a href=\"#\" class=\"deleteBook\" >\n" +
                "              <img src=\"images/delete.png\" alt=\"\" title=\" 删 除 \" id=\"delete_img\">\n" +
                "            </a>\n" +
                "          </td>\n" +
                "        </tr>\n"
        }
        // 设置表格内容
        document.getElementById("bookTable").innerHTML = tableData;


        //对每个btn添加属性"bookId", 目的：点击时可以获取该book的所有细节
        var updateBook = document.getElementsByClassName("updateBook");
        for (var i = 0; i < updateBook.length; i++) {
            updateBook[i].setAttribute("bookId", bookList[i].bookId);
            updateBook[i].setAttribute("bookName", bookList[i].bookName);
            updateBook[i].setAttribute("author", bookList[i].author);
            updateBook[i].setAttribute("price", bookList[i].price);
            updateBook[i].setAttribute("stock", bookList[i].stock);
            updateBook[i].setAttribute("publisher", bookList[i].publisher);
        }

        //删除图书
        var deleteBook = document.getElementsByClassName("deleteBook");
        for (var i = 0; i < deleteBook.length; i++) {
            deleteBook[i].setAttribute("bookId", bookList[i].bookId);
            deleteBook[i].setAttribute("bookName", bookList[i].bookName);
        }


        //修改图书
        for (var i = 0; i < updateBook.length; i++) {
            updateBook[i].addEventListener('click', function () {
                submit.innerText = " 修  改  图  书 ";
                bookId.setAttribute("disabled", "disabled");
                bookId.value = this.getAttribute("bookId");
                bookName.value = this.getAttribute("bookName");
                author.value = this.getAttribute("author");
                price.value = this.getAttribute("price");
                stock.value = this.getAttribute("stock");
                publisher.value = this.getAttribute("publisher");

                /*悬浮窗口的显示,需要将display变成block*/
                document.getElementById("hoverWindow").style.display = "block";
                /*将背景变暗*/
                document.getElementById("window").setAttribute("class", "window_css");

            })
        }

        // var user = JSON.parse(sessionStorage.getItem("user"))
        // var admin = document.getElementById('admin');
        // admin.innerText = "欢迎" + user.userName + "登录";


        //删除图书
        for (var i = 0; i < deleteBook.length; i++) {
            deleteBook[i].addEventListener('click', function () {
                var bookId = this.getAttribute("bookId");
                var bookName = this.getAttribute("bookName");
                if (confirm("请再次确认是否要删除《" + bookName + "》！")) {
                    location.href = "/deleteBook?bookId=" + bookId;
                }
            })
        }

    })



    //点击事件搜索
    let query_ipt = document.getElementById("query_ipt");
    let query_btn = document.getElementById("query_btn");
    query_btn.addEventListener('click', function () {
        let queryName = query_ipt.value;
        axios({
            url: "/getAllBooksByName?queryName=" + queryName,
            method: 'get'
        }).then(resp => {
            var bookList = resp.data;
            var tableData = "<tr >\n" +
                "        <th>书本编号</th>\n" +
                "        <th>书名</th>\n" +
                "        <th>作者</th>\n" +
                "        <th>价格</th>\n" +
                "        <th>库存</th>\n" +
                "        <th>出版社</th>\n" +
                "        <th colspan=\"2\">操作</th>\n" +
                "      </tr>\n"
            for (var i = 0; i < bookList.length; i++) {
                tableData += "<tr>\n" +
                    "          <td>" + bookList[i].bookName + "</td>\n" +
                    "          <td>" + bookList[i].bookId + "</td>\n" +
                    "          <td>" + bookList[i].author + "</td>\n" +
                    "          <td>" + bookList[i].price + "</td>\n" +
                    "          <td>" + bookList[i].stock + "</td>\n" +
                    "          <td>" + bookList[i].publisher + "</td>\n" +
                    "          <td id=\"operation\">\n" +
                    "            <a href=\"#\" class=\"updateBook\">\n" +
                    "              <img src=\"images/update.png\" alt=\"\" title=\" 修 改 \" id=\"update_img\">\n" +
                    "            </a>\n" +
                    "            <a href=\"#\" class=\"deleteBook\" >\n" +
                    "              <img src=\"images/delete.png\" alt=\"\" title=\" 删 除 \" id=\"delete_img\">\n" +
                    "            </a>\n" +
                    "          </td>\n" +
                    "        </tr>\n"
            }
            // 设置表格内容
            document.getElementById("bookTable").innerHTML = tableData;


            //对每个btn添加属性"bookId", 目的：点击时可以获取该book的所有细节
            var updateBook = document.getElementsByClassName("updateBook");
            for (var i = 0; i < updateBook.length; i++) {
                updateBook[i].setAttribute("bookId", bookList[i].bookId);
                updateBook[i].setAttribute("bookName", bookList[i].bookName);
                updateBook[i].setAttribute("author", bookList[i].author);
                updateBook[i].setAttribute("price", bookList[i].price);
                updateBook[i].setAttribute("stock", bookList[i].stock);
                updateBook[i].setAttribute("publisher", bookList[i].publisher);
            }

            //设置属性
            var deleteBook = document.getElementsByClassName("deleteBook");
            for (var i = 0; i < deleteBook.length; i++) {
                deleteBook[i].setAttribute("bookId", bookList[i].bookId);
                deleteBook[i].setAttribute("bookName", bookList[i].bookName);
            }


            //修改图书
            for (var i = 0; i < updateBook.length; i++) {
                updateBook[i].addEventListener('click', function () {
                    submit.innerText = " 修  改  图  书 ";
                    bookId.setAttribute("disabled", "disabled");
                    bookId.value = this.getAttribute("bookId");
                    bookName.value = this.getAttribute("bookName");
                    author.value = this.getAttribute("author");
                    price.value = this.getAttribute("price");
                    stock.value = this.getAttribute("stock");
                    publisher.value = this.getAttribute("publisher");

                    /*悬浮窗口的显示,需要将display变成block*/
                    document.getElementById("hoverWindow").style.display = "block";
                    /*将背景变暗*/
                    document.getElementById("window").setAttribute("class", "window_css");

                })
            }

            //删除图书
            for (var i = 0; i < deleteBook.length; i++) {
                deleteBook[i].addEventListener('click', function () {
                    var bookId = this.getAttribute("bookId");
                    var bookName = this.getAttribute("bookName");
                    if (confirm("请再次确认是否要删除《" + bookName + "》！")) {
                        location.href = "/deleteBook?bookId=" + bookId;
                    }
                })
            }
        })
    })


    //键盘事件搜索
    query_ipt.addEventListener('keydown', event => {
        if (event.key === 'Enter') {
            let queryName = query_ipt.value;
            axios({
                url: "/getAllBooksByName?queryName=" + queryName,
                method: 'get'
            }).then(resp => {
                var bookList = resp.data;
                var tableData = "<tr >\n" +
                    "        <th>书本编号</th>\n" +
                    "        <th>书名</th>\n" +
                    "        <th>作者</th>\n" +
                    "        <th>价格</th>\n" +
                    "        <th>库存</th>\n" +
                    "        <th>出版社</th>\n" +
                    "        <th colspan=\"2\">操作</th>\n" +
                    "      </tr>\n"
                for (var i = 0; i < bookList.length; i++) {
                    tableData += "<tr>\n" +
                        "          <td>" + bookList[i].bookName + "</td>\n" +
                        "          <td>" + bookList[i].bookId + "</td>\n" +
                        "          <td>" + bookList[i].author + "</td>\n" +
                        "          <td>" + bookList[i].price + "</td>\n" +
                        "          <td>" + bookList[i].stock + "</td>\n" +
                        "          <td>" + bookList[i].publisher + "</td>\n" +
                        "          <td id=\"operation\">\n" +
                        "            <a href=\"#\" class=\"updateBook\">\n" +
                        "              <img src=\"images/update.png\" alt=\"\" title=\" 修 改 \" id=\"update_img\">\n" +
                        "            </a>\n" +
                        "            <a href=\"#\" class=\"deleteBook\" >\n" +
                        "              <img src=\"images/delete.png\" alt=\"\" title=\" 删 除 \" id=\"delete_img\">\n" +
                        "            </a>\n" +
                        "          </td>\n" +
                        "        </tr>\n"
                }
                // 设置表格内容
                document.getElementById("bookTable").innerHTML = tableData;


                //对每个btn添加属性"bookId", 目的：点击时可以获取该book的所有细节
                var updateBook = document.getElementsByClassName("updateBook");
                for (var i = 0; i < updateBook.length; i++) {
                    updateBook[i].setAttribute("bookId", bookList[i].bookId);
                    updateBook[i].setAttribute("bookName", bookList[i].bookName);
                    updateBook[i].setAttribute("author", bookList[i].author);
                    updateBook[i].setAttribute("price", bookList[i].price);
                    updateBook[i].setAttribute("stock", bookList[i].stock);
                    updateBook[i].setAttribute("publisher", bookList[i].publisher);
                }

                //设置属性
                var deleteBook = document.getElementsByClassName("deleteBook");
                for (var i = 0; i < deleteBook.length; i++) {
                    deleteBook[i].setAttribute("bookId", bookList[i].bookId);
                    deleteBook[i].setAttribute("bookName", bookList[i].bookName);
                }


                //修改图书
                for (var i = 0; i < updateBook.length; i++) {
                    updateBook[i].addEventListener('click', function () {
                        submit.innerText = " 修  改  图  书 ";
                        bookId.setAttribute("disabled", "disabled");
                        bookId.value = this.getAttribute("bookId");
                        bookName.value = this.getAttribute("bookName");
                        author.value = this.getAttribute("author");
                        price.value = this.getAttribute("price");
                        stock.value = this.getAttribute("stock");
                        publisher.value = this.getAttribute("publisher");

                        /*悬浮窗口的显示,需要将display变成block*/
                        document.getElementById("hoverWindow").style.display = "block";
                        /*将背景变暗*/
                        document.getElementById("window").setAttribute("class", "window_css");

                    })
                }

                //删除图书
                for (var i = 0; i < deleteBook.length; i++) {
                    deleteBook[i].addEventListener('click', function () {
                        var bookId = this.getAttribute("bookId");
                        var bookName = this.getAttribute("bookName");
                        if (confirm("请再次确认是否要删除《" + bookName + "》！")) {
                            location.href = "/deleteBook?bookId=" + bookId;
                        }
                    })
                }
            })
        }
    })



    window.onload = function () {
        var bookId = document.getElementById("bookId");
        var bookName = document.getElementById("bookName");
        var author = document.getElementById("author");
        var price = document.getElementById("price");
        var stock = document.getElementById("stock");
        var publisher = document.getElementById("publisher");
        var submit = document.getElementById("submit");
        var addBook = document.getElementById("add_book");
        // var deleteBook = document.getElementsByClassName("deleteBook");
        // var updateBook = document.getElementsByClassName("updateBook");
        var cancel_img = document.getElementById("cancel_img");


        //添加图书
        addBook.addEventListener('click', function () {
            bookId.removeAttribute("disabled");
            submit.innerText = " 添  加  图  书 ";
            bookId.value = "";
            bookName.value = "";
            author.value = "";
            price.value = "";
            stock.value = "";
            publisher.value = "";
            /*悬浮窗口的显示,需要将display变成block*/
            document.getElementById("hoverWindow").style.display = "block";
            /*将背景变暗*/
            document.getElementById("window").setAttribute("class", "window_css");
        })


        //提交表单
        submit.addEventListener('click', function () {
            bookId.removeAttribute("disabled");
        })


        //背景的恢复
        cancel_img.addEventListener('click', function () {
            /*关闭悬浮窗口,需要将display变成none*/
            document.getElementById("hoverWindow").style.display = "none";
            /*将背景恢复*/
            document.getElementById("window").removeAttribute("class", "window_css");
        });
    }


</script>

</body>
</html>